<template>
  <view class="biddingArea">
    <classifyHead title="参拍区" />
    <view class="top">
      <view class="myBook">
        <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec8b.png" mode="aspectFit" />
        我的预约
      </view>
      <view class="myBook" @click="handleOneBook">
        <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec88.png" mode="aspectFit" />
        一键预约
      </view>
    </view>
    <view class="middle">
<view class="middle-item">
<view class="score-name">今天可用竞购积分<image
    src="../../static/deatil.png"
    mode="aspectFit"
/> </view>
<view class="score-count">{{ availableScore }}</view>
</view>
<view style="font-size: 54rpx;margin-top: 10rpx;">|</view>
<view class="middle-item">
<view class="score-name">今天已预约的竞购限分</view>
<view class="score-count">{{ totalBidScore}}</view>
</view>
    </view>
    <view class="bidding" @click="handleMorning">
      <view class="box">
        <view>预约时间 上午场 08.00:00-09:50:00</view>
        <view>预约中</view>
      </view>
        <view class="box" style="background:#5756B3;">
        <view>销售时间 上午场 10:00:00-11:00:00</view>
      </view>
      <view class="onceBook">
        <image
          src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5817e4b0eb7e9b0fec85.png"
          mode="widthFix"
        />
        <button class="btn">立即预约</button>
      </view>
    </view>
       <view class="bidding">
      <view class="box" style="background: #262478;">
        <view>预约时间 上午场 12:00:00 -13:50:00</view>
        <view>等待预约</view>
      </view>
        <view class="box" style="background:#171636;">
        <view>销售时间 下午场 14:00:00-15:00:00</view>
      </view>
      <view class="onceBook">
        <image
          src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec86.png"
          mode="widthFix"
        />
        <button class="btn" style="background:#171636;">等待预约</button>
      </view>
    </view>
       <view class="bidding">
      <view class="box" style="background: #262478;">
        <view>预约时间 晚间场 15:00:00-16:50:00</view>
        <view>等待预约</view>
      </view>
        <view class="box" style="background:#171636;">
        <view>销售时间 晚间场 17:00:00-18:00:00</view>
      </view>
      <view class="onceBook">
        <image
          src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec87.png"
          mode="widthFix"
        />
        <button class="btn" style="background:#171636;">等待预约</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import { ref,onMounted} from "vue";
// 定义要显示可用的积分变量
const availableScore = ref('0.00');
//预约总积分
const totalBidScore = ref(0);
// 页面加载时从本地读取积分
onMounted(() => {
  const bidScore =Local.get('totalBidScore');
     // 读取已使用积分（在“一键预约”等页面设置）
  const usedBidRaw = Local.get('usedBidScore');
   // 计算剩余可用积分
  const remainingBid = Math.max(0, bidScore - usedBidRaw);
  // 如果有存储值，则使用；否则保持 0.00
  availableScore.value = remainingBid || '0.00';
  totalBidScore.value = bidScore  || '0.00';
});
//跳转上午拍卖区
const handleMorning = () => { 
  uni.navigateTo({
    url: "/subPackage/biddingArea/morningArea",
  });
};
//一键预约
const handleOneBook = () => { 
  uni.navigateTo({
    url: "/subPackage/biddingArea/oneClick",
  });
};
</script>

<style lang="scss" scoped>
.biddingArea {
  .top {
    margin-top: 20rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .myBook {
      border: 1px solid black;
      width: 280rpx;
      height: 125rpx;
      padding: 0 20rpx;
      border-radius: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      image{
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
//公用样式
   .middle-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: aliceblue;
    .score-name{  
    font-size: 33rpx; 
        image{
         width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        margin-left: 12rpx;
    }
}
.score-count{
    font-size: 40rpx;
    margin-top: 12rpx;
}

   }

//
  .middle{
   background: #5756B3;
   height: 106rpx;
   margin: 0 10rpx;
   width: 690rpx;
   border-radius: 46rpx;
   display: flex;
   justify-content: space-around;
  padding:30rpx 20rpx;
  }
  .bidding{
    margin-top: 25rpx;
    width:calc(100% - 20rpx) ;
    padding: 0 10rpx;
.box{
 width:calc(100% - 20rpx) ;
height: 60rpx;
background:#289606;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10rpx;
color: aliceblue;
}
.onceBook{
width: 100%;
height: 205rpx;
position: relative;
image{
  width:100%;
  height: 100%;
}
.btn{
  width: 200rpx;
  height: 52rpx;
  border-radius: 40rpx;
  font-size: 25rpx;
  background-color:#00ff0c;
  color: aliceblue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 114rpx;
  left: 497rpx;
}
}
  }
}
</style>
